<template>
  <div class="w-full bg-gray-700">
    <div class="flex w-full lg:w-2/3 px-6 m-auto">
      <img class="icon" src="@/assets/images/logo.png" alt="logo" />
      <transition name="fade-in">
        <span class="text-lg my-auto mx-4 text-white">{{ blogTitle }}</span>
      </transition>
      <div class="flex-grow"></div>
      <div class="w-32 lg:w-64 m-auto">
        <el-input
          placeholder="请输入内容"
          v-model="keyword"
          class="input-with-select"
          @keyup.native.enter="$emit('click', keyword)"
        >
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "tapBar",
  data() {
    return {
      keyword: "",
    };
  },
  computed: {
    ...mapGetters(["blogTitle"]),
  },
};
</script>
